Skip to content

Commit

Permalink
Rapidez v2 compatibility (#68)
Browse files Browse the repository at this point in the history
  • Loading branch information
indykoning authored Mar 13, 2024
1 parent 4e75206 commit e870b31
Show file tree
Hide file tree
Showing 11 changed files with 143 additions and 89 deletions.
2 changes: 1 addition & 1 deletion composer.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"require": {
"php": "^8.0|^8.1|^8.2",
"blade-ui-kit/blade-heroicons": "^2.0",
"rapidez/core": "^1.0"
"rapidez/core": "^2.0"
},
"autoload": {
"psr-4": {
Expand Down
74 changes: 53 additions & 21 deletions resources/views/cart/coupon.blade.php
Original file line number Diff line number Diff line change
@@ -1,32 +1,64 @@
<toggler>
<div slot-scope="{ isOpen, toggle }">
<coupon v-show="isOpen" v-slot="{ cart, removeCoupon, couponCode, inputEvents, applyCoupon, submitError }">
<form class="text-sm" @submit.prevent="applyCoupon">
<div class="flex w-full flex-row gap-x-3">
<x-rapidez-ct::input
<div v-if="isOpen" v-cloak class="text-sm">
<graphql-mutation
:query="'mutation ($cart_id: String!, $coupon_code: String!) { applyCouponToCart(input: { cart_id: $cart_id, coupon_code: $coupon_code }) { cart { ' + config.queries.cart + ' } } }'"
:variables="{ cart_id: mask, coupon_code: '' }"
:notify="{ message: config.translations.cart.coupon.applied }"
:clear="true"
:watch="false"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate, variables }"
>
<form v-on:submit.prevent="mutate" class="flex w-full gap-x-3">
<x-rapidez::input
:label="false"
class="text-ct-primary w-60"
name="couponCode"
:placeholder="__('Enter code') . '...'"
v-on="inputEvents"
v-bind:value="couponCode"
placeholder="Coupon code"
v-model="variables.coupon_code"
v-bind:disabled="$root.loading"
required
/>
<x-rapidez-ct::button.outline type="submit" loader>
<x-rapidez::button type="submit" class="sm:text-sm">
@lang('Apply')
</x-rapidez-ct::button.outline>
</div>
<div v-if="cart.discount_name && cart.discount_amount < 0" class="text-ct-inactive mt-1 flex items-center gap-x-2">
<button v-on:click="removeCoupon">
<x-heroicon-s-x-mark class="h-4 w-4" />
</button>
@lang('Discount'): @{{ cart.discount_name }}
</div>
<div v-if="submitError" class="text-ct-error mt-1 italic">
@{{ submitError }}
</div>
</form>
</coupon>
</x-rapidez::button>
</form>
</graphql-mutation>

<div class="flex w-full gap-x-3">
<x-rapidez-ct::input
class="text-ct-primary w-60"
name="couponCode"
:placeholder="__('Enter code') . '...'"
v-on="inputEvents"
v-bind:value="couponCode"
v-bind:disabled="$root.loading"
required
/>
<x-rapidez-ct::button.outline type="submit" loader>
@lang('Apply')
</x-rapidez-ct::button.outline>
</div>

<template v-if="cart.applied_coupons?.length" v-for="coupon in cart.applied_coupons" v-cloak>
<graphql-mutation
:query="'mutation ($cart_id: String!) { removeCouponFromCart(input: { cart_id: $cart_id }) { cart { ' + config.queries.cart + ' } } }'"
:variables="{ cart_id: mask }"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate }"
>
<form v-on:submit.prevent="mutate" class="text-ct-inactive mt-1 flex items-center gap-x-2">
<button type="submit">
<x-heroicon-s-x-mark class="size-4 text-black-400"/>
</button>
@{{ coupon.code }}
</form>
</graphql-mutation>
</template>
</div>
<x-rapidez-ct::button.outline v-show="!isOpen" @click="toggle">
@lang('Coupon code')
</x-rapidez-ct::button.outline>
Expand Down
39 changes: 22 additions & 17 deletions resources/views/cart/overview.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,21 +5,26 @@
@section('robots', 'NOINDEX,NOFOLLOW')

@section('content')
<cart v-cloak>
<div v-if="hasItems" class="container" slot-scope="{ cart, hasItems, changeQty, remove }">
<x-rapidez-ct::layout class="!mt-0">
@include('rapidez-ct::cart.cart')
<x-slot:sidebar>
@include('rapidez-ct::cart.partials.sidebar.sidebar')
</x-slot:sidebar>
</x-rapidez-ct::layout>
@include('rapidez-ct::cart.partials.crosssells')
</div>
<div v-else class="container">
<p>@lang("You don't have anything in your cart.")</p>
<x-rapidez-ct::button.outline class="mt-3" href="/">
@lang('Return to home')
</x-rapidez-ct::button.outline>
</div>
</cart>
<graphql v-if="mask"
:query="'query getCart($cart_id: String!) { cart (cart_id: $cart_id) { ' + config.queries.cart + ' } }'"
:variables="{ cart_id: mask }"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
>
</graphql>
<div v-if="hasCart" v-cloak class="container">
<x-rapidez-ct::layout class="!mt-0">
@include('rapidez-ct::cart.cart')
<x-slot:sidebar>
@include('rapidez-ct::cart.partials.sidebar.sidebar')
</x-slot:sidebar>
</x-rapidez-ct::layout>
@include('rapidez-ct::cart.partials.crosssells')
</div>
<div v-else class="container">
<p>@lang("You don't have anything in your cart.")</p>
<x-rapidez-ct::button.outline class="mt-3" href="/">
@lang('Return to home')
</x-rapidez-ct::button.outline>
</div>
@endsection
19 changes: 12 additions & 7 deletions resources/views/cart/partials/product/description.blade.php
Original file line number Diff line number Diff line change
@@ -1,14 +1,19 @@
<td class="flex max-md:w-1/2 md:table-cell">
<div class="flex flex-col items-start">
<a :href="item.url | url">
<div dusk="cart-item-name">@{{ item.name }}</div>
<div v-for="(optionValue, option) in item.options">
@{{ option }}: @{{ optionValue }}
<a :href="item.product.url_key + item.product.url_suffix | url">
<div dusk="cart-item-name">@{{ item.product.name }}</div>
<div v-for="option in item.configurable_options">
@{{ option.option_label }}: @{{ option.value_label }}
</div>
<div v-for="option in cart?.items2?.find((item) => item.item_id == itemId).options.filter((option) => !['info_buyRequest', 'option_ids'].includes(option.code) && option.label)">
@{{ option.label }}: @{{ option.value.title || option.value }}
<div v-for="option in item.customizable_options">
@{{ option.label }}: @{{ option.values[0].label || option.values[0].value }}
</div>
<div v-for="option in config.cart_attributes">
<template v-if="item.product.attribute_values?.[option] && typeof item.product.attribute_values[option] === 'object'">
@{{ option }}: <span v-html="item.product.attribute_values[option]?.join(', ')"></span>
</template>
</div>
</a>
@include('rapidez-ct::cart.partials.product.remove-button')
</div>
</td>
</td>
3 changes: 2 additions & 1 deletion resources/views/cart/partials/product/image.blade.php
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<td class="h-24 w-40 !pl-0 max-md:flex max-md:w-1/2">
<img v-if="item.image" class="object-contain" :alt="item.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + item.image + '.webp'">
<img v-if="item.image" class="object-contain" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento/catalog/product' + item.product.image.url.replace(config.media_url, '') + '.webp'">
<x-rapidez::no-image v-else />
</td>

14 changes: 7 additions & 7 deletions resources/views/cart/partials/product/price.blade.php
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
<td class="flex items-center font-medium max-md:w-1/3 md:table-cell">
<div v-if="item.specialPrice">
@{{ item.specialPrice | price }}
<div v-if="item.prices.specialPrice">
@{{ item.prices.specialPrice | price }}
</div>
<div :class="{ 'line-through text-xs text-ct-inactive font-normal': item.specialPrice }">
@{{ item.price | price }}
<div :class="{ 'line-through text-xs text-ct-inactive font-normal': item.prices.specialPrice }">
@{{ item.prices.price_including_tax.value | price }}
</div>
</td>
<td class="flex items-center font-medium max-md:w-1/3 md:table-cell [&>*]:mx-auto">
<td class="flex items-center font-medium max-md:w-1/3 md:table-cell *:mx-auto">
<x-rapidez-ct::input.quantity/>
</td>
<td class="flex items-center justify-end text-right font-medium max-md:w-1/3 md:table-cell">
@{{ item.total | price }}
</td>
@{{ item.prices.row_total_including_tax.value | price }}
</td>
4 changes: 2 additions & 2 deletions resources/views/cart/partials/products.blade.php
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<table class="w-full border-b">
<thead class="bg-ct-inactive-100 mt-5 flex rounded md:table-header-group">
<tr class="text-xs [&>*]:py-4 [&>*]:font-normal [&>*]:px-5">
<tr class="text-xs *:py-4 *:font-normal *:px-5">
<th class="!pl-0 max-md:hidden"></th>
<th class="text-start">@lang('Product')</th>
<th class="text-start max-md:hidden">@lang('Price')</th>
Expand All @@ -9,7 +9,7 @@
</tr>
</thead>
<tbody class="divide-y">
<tr v-for="(item, itemId, index) in cart.items" class="flex flex-wrap gap-y-5 py-5 md:table-row md:[&>*]:p-5">
<tr v-for="(item, index) in cart.items" v-if="cart.items" class="flex flex-wrap gap-y-5 py-5 md:table-row md:*:p-5">
@include('rapidez-ct::cart.partials.product.image')
@include('rapidez-ct::cart.partials.product.description')
@include('rapidez-ct::cart.partials.product.price')
Expand Down
16 changes: 8 additions & 8 deletions resources/views/cart/partials/sidebar/summary.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,28 +5,28 @@
<x-rapidez-ct::separated-listing tag="dl">
<div>
<dt>@lang('Subtotal')</dt>
<dd>@{{ cart.subtotal | price }}</dd>
<dd>@{{ cart.prices.subtotal_including_tax.value | price }}</dd>
</div>
<div v-if="cart.shipping_method">
<dt>@lang('Shipping')</dt>
<dd v-if="cart.shipping_amount_excl_tax > 0">
@{{ cart.shipping_amount_excl_tax | price }}
<dd v-if="cart.shipping_addresses[0].selected_shipping_method.amount.value > 0">
@{{ cart.shipping_addresses[0].selected_shipping_method.amount.value | price }}
</dd>
<dd v-else class="font-medium text-ct-enhanced">
@lang('Free')
</dd>
</div>
<div v-if="cart.tax > 0">
<dt>@lang('Tax')</dt>
<dd>@{{ cart.tax | price }}</dd>
<dd>@{{ cart.prices.applied_taxes[0].amount.value | price }}</dd>
</div>
<div v-if="cart.discount_name">
<dt>@lang('Discount') (@{{ cart.discount_name }})</dt>
<dd>@{{ cart.discount_amount | price }}</dd>
<div v-for="discount in cart.prices.discounts">
<dt>@{{ discount.label }}</dt>
<dd>-@{{ discount.amount.value | price }}</dd>
</div>
<div class="font-medium">
<dt>@lang('Total')</dt>
<dd>@{{ cart.total | price }}</dd>
<dd>@{{ cart.prices.grand_total.value | price }}</dd>
</div>
</x-rapidez-ct::separated-listing>

Expand Down
8 changes: 4 additions & 4 deletions resources/views/checkout/overview.blade.php
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,18 @@
@section('robots', 'NOINDEX,NOFOLLOW')

@section('content')
<checkout v-slot="{ checkout, cart, hasItems, save, goToStep }" :set="checkout.step = Math.max(checkout.step, 2)" v-cloak>
<checkout v-slot="{ checkout, save, goToStep, forceAccount }" :set="checkout.step = Math.max(checkout.step, 2)" v-cloak>
<div class="container">
<x-rapidez-ct::layout class="mt-8 sm:mt-14">
<template v-if="checkout.step == 2 && hasItems">
<template v-if="checkout.step == 2 && $root?.cart?.total_quantity">
@include('rapidez-ct::checkout.steps.credentials')
</template>

<template v-if="checkout.step == 3">
<template v-if="checkout.step == getCheckoutStep('payment')">
@include('rapidez-ct::checkout.steps.payment')
</template>

<template v-if="checkout.step == 4">
<template v-if="checkout.step == getCheckoutStep('success')">
@include('rapidez-ct::checkout.steps.success')
</template>

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</x-rapidez-ct::title.lg>
<x-rapidez-ct::separated-listing class="border-b pb-4 mb-4">
<li v-for="item in cart.items">
@{{ item.qty }}x @{{ item.name }}
@{{ item.quantity }}x @{{ item.product.name }}
</li>
</x-rapidez-ct::separated-listing>
<x-rapidez-ct::separated-listing tag="dl">
Expand Down
51 changes: 31 additions & 20 deletions resources/views/components/input/quantity.blade.php
Original file line number Diff line number Diff line change
@@ -1,20 +1,31 @@
<div class="flex w-20 overflow-hidden rounded border">
<button
class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
v-on:click="item.qty <= item.min_sale_qty ? item.qty = item.qty : item.qty = +item.qty - item.qty_increments;changeQty(item)"
>-</button>
<input
class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
name="qty"
type="number"
{{ $attributes }}
v-model="item.qty"
v-on:change="changeQty(item)"
v-bind:min="item.min_sale_qty > item.qty_increments ? item.min_sale_qty : item.qty_increments"
v-bind:step="item.qty_increments"
/>
<button
class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
v-on:click="item.qty = +item.qty + item.qty_increments;changeQty(item)"
>+</button>
</div>

<graphql-mutation
:query="'mutation ($cart_id: String!, $cart_item_id: Int, $quantity: Float) { updateCartItems(input: { cart_id: $cart_id, cart_items: [{ cart_item_id: $cart_item_id, quantity: $quantity }] }) { cart { ' + config.queries.cart + ' } } }'"
:variables="{ cart_id: mask, cart_item_id: item.id, quantity: item.quantity }"
:callback="updateCart"
:error-callback="checkResponseForExpiredCart"
v-slot="{ mutate, variables }"
>
<form v-on:submit.prevent="mutate" class="flex w-20 overflow-hidden rounded border">
<button
class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
v-on:click.prevent="variables.quantity <= (item.product.stock_item?.min_sale_qty || 1) ? variables.quantity = variables.quantity : variables.quantity = +variables.quantity - (item.product.stock_item?.qty_increments || 1);mutate()"
>-</button>
<input
class="h-10 w-2/5 border-none px-0 text-center text-sm [appearance:textfield] focus:ring-0 [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
name="qty"
type="number"
{{ $attributes }}
v-model="variables.quantity"
v-on:change="mutate"
v-bind:min="Math.max(item.product.stock_item?.min_sale_qty, item.product.stock_item?.qty_increments) || null"
v-bind:max="item.product.stock_item?.max_sale_qty"
v-bind:step="item.qty_increments"
v-bind:dusk="'qty-'+index"
/>
<button
class="flex-1 bg-ct-inactive-100 transition hover:bg-opacity-80"
v-on:click.prevent="variables.quantity = +variables.quantity + (item.product.stock_item?.qty_increments || 1);mutate()"
>+</button>
</form>
</graphql-mutation>

0 comments on commit e870b31

Please sign in to comment.