Cart for Shopaholic package
Package adds classes to help with integration of Orders for Shopaholic and Shopaholic plugins.
Package will allow you to quickly add/update/remove product in cart, change product quantity and etc.
npm install @oc-shopaholic/shopaholic-cart
Class will allow you to quickly add "Add to cart" button in your project.
<div class="_shopaholic-product-wrapper" data-product-id="{{ obProduct.id }}">
<h2>{{ obProduct.name }}</h2>
{% set obOfferList = obProduct.offer %}
{% for obOffer in obOfferList %}
<input type="radio" name="offer_id" value="{{ obOffer.id }}">
{% endfor %}
<input type="number" name="{{ quantity }}" value="1">
<button type="button" class="_shopaholic-cart-add" aria-label="Add to cart">
</div>
Simple example:
import ShopaholicCartAdd from '@oc-shopaholic/shopaholic-cart/shopaholic-cart-add';
const obShopaholicCartAdd = new ShopaholicCartAdd();
obShopaholicCartAdd.setAjaxRequestCallback((obRequestData, obButton) => {
obRequestData.loading = '.preloader';
}).init();
Method adds 'click' event listener on "Add to cart" button.
You can set callback function. This callback function will be called before sending ajax request.
You can change request object inside callback function. For example: add called partial and selector, add preloader class, etc.
Class will allow you to quickly add "Remove from cart" button in your project.
<div class="_shopaholic-product-wrapper" data-position-id="{{ obCartPosition.id }}">
<button type="button" class="_shopaholic-cart-remove" aria-label="Remove from cart">
</div>
Simple example:
import ShopaholicCartRemove from '@oc-shopaholic/shopaholic-cart/shopaholic-cart-remove';
const obShopaholicCartRemove = new ShopaholicCartRemove();
obShopaholicCartRemove.setAjaxRequestCallback((obRequestData, obButton) => {
obRequestData.loading = '.preloader';
}).init();
Method adds 'click' event listener on "Remove from cart" button.
You can set callback function. This callback function will be called before sending ajax request.
You can change request object inside callback function. For example: add called partial and selector, add preloader class, etc.
Class will allow you to quickly add "Remove cart position" button in your project.
<div class="_shopaholic-product-wrapper" data-position-id="{{ obCartPosition.id }}">
<button type="button" class="_shopaholic-cart-restore" aria-label="Restore cart position">
</div>
Simple example:
import ShopaholicCartRestore from '@oc-shopaholic/shopaholic-cart/shopaholic-cart-restore';
const obShopaholicCartRestore = new ShopaholicCartRestore();
obShopaholicCartRestore.setAjaxRequestCallback((obRequestData, obButton) => {
obRequestData.loading = '.preloader';
}).init();
Method adds 'click' event listener on "Restore cart position" button.
You can set callback function. This callback function will be called before sending ajax request.
You can change request object inside callback function. For example: add called partial and selector, add preloader class, etc.
Class will allow you to quickly add "Increase/Decrease" buttons, "quantity" input in your project.
<div class="_shopaholic-product-wrapper" data-position-id="{{ obCartPosition.id }}">
<button type="button" class="_shopaholic-cart-increase-quantity" aria-label="Increase quantity">
<input class="_shopaholic-cart-quantity" type="number" name="quantity" value="{{ obCartPosition }}" max="{{ obCartPosition.offer.quantity }}" min="1">
<button type="button" class="_shopaholic-cart-decrease-quantity" aria-label="Decrease quantity">
</div>
Simple example:
import ShopaholicCartUpdate from '@oc-shopaholic/shopaholic-cart/shopaholic-cart-update';
const obShopaholicCartUpdate = new ShopaholicCartUpdate();
obShopaholicCartUpdate.setAjaxRequestCallback((obRequestData, obInput) => {
obRequestData.loading = '.preloader';
}).init();
Method adds 'click' event listener on "Increase/Decrease" buttons and "input" event on "quantity" inputinput.
You can set callback function. This callback function will be called before sending ajax request.
You can change request object inside callback function. For example: add called partial and selector, add preloader class, etc.
Class will allow you to quickly add "Choose shipping type" input in your project.
{% set obShippingTypeList = ShippingTypeList.make().sort().active() %}
{% for obShippingType in obShippingTypeList %}
<input type="radio" name="shipping_type_id" value="{{ obShippingType.id }}">
{% endfor %}
Simple example:
import ShopaholicCartShippingType from '@oc-shopaholic/shopaholic-cart/shopaholic-cart-shipping-type';
const obShopaholicCartShippingType = new ShopaholicCartShippingType();
obShopaholicCartShippingType.setAjaxRequestCallback((obRequestData, obInput) => {
obRequestData.loading = '.preloader';
}).init();
Method adds 'change' event listener on "Shipping type" input.
You can set callback function. This callback function will be called before sending ajax request.
You can change request object inside callback function. For example: add called partial and selector, add preloader class, etc.
Class will allow you to quickly add "Checkout form" in your project.
<form class="_shopaholic-order-form">
<input class="_shopaholic-order-field" name="first_name" data-group="user" data-field="name">
<input class="_shopaholic-order-field" name="last_name" data-group="user">
<input class="_shopaholic-order-field" name="email" data-group="user">
<input class="_shopaholic-order-field" name="address" data-group="shipping_address" data-field="address1">
<input class="_shopaholic-order-field" name="comment" data-group="order.property">
</form>
Simple example:
import ShopaholicOrder from '@oc-shopaholic/shopaholic-cart/shopaholic-order';
const obShopaholicOrder = new ShopaholicOrder();
obShopaholicOrder.setAjaxRequestCallback((obRequestData, obInput) => {
obRequestData.loading = '.preloader';
});
obShopaholicOrder.create();
Method prepares request object with order data, sends ajax request and create order.
You can set callback function. This callback function will be called before sending ajax request.
You can change request object inside callback function. For example: add called partial and selector, add preloader class, etc.
© 2024, oc-shopaholic under GNU GPL v3.
Developed by Andrei Kharanenka.