@heseya/store-vue

@heseya/store-vue

Instalation

$ yarn add @heseya/store-core @heseya/store-vue
// or
$ npm i @heseya/store-core @heseya/store-vue

Usage

TODO

Variables

You need to add following code to your root css stylesheet. There you can set colors to be used by library

:root {
  --primary-color: #aaa;
  --secondary-color: #aaa;
  --gray: #aaa;
  --error-color: #aaa;

  --header-font-family-family: 'Lato';
  --text-font-family: 'Lato';
}

If You'd like to change default colors of texts and buttons/boxes in <hs-checkout> component, please add this variable set to :root selector

:root {
  --hs-checkout-price-initial-color: #aaa;
  --hs-checkout-price-discount-color: #aaa;
  --hs-checkout-price-color: #aaa;

  --hs-checkout-label-color: #aaa;
  --hs-checkout-value-color: #aaa;

  --hs-checkout-submit-background: #aaa;
  --hs-checkout-submit-background-hover: #aaa;
  --hs-checkout-submit-color: #aaa;
  --hs-checkout-submit-color-hover: #aaa;

  --hs-checkout-button-link-background: #aaa;
  --hs-checkout-button-link-background-hover: #aaa;
  --hs-checkout-button-link-color: #aaa;
  --hs-checkout-button-link-color-hover: #aaa;

  --hs-checkout-sale-background: #aaa;
  --hs-checkout-sale-color: #aaa;
  --hs-checkout-sale-button-background: #aaa;
  --hs-checkout-sale-button-background-hover: #aaa;
  --hs-checkout-sale-button-color: #aaa;
  --hs-checkout-sale-button-color-hover: #aaa;
}

<hs-checkout> customization

Every section of <hs-checkout> component can be replace with a custom one just by placing it in <template #section-name>. Here's list of every customizable section and explanation of its props:

1. delivery-country receives:

   1. value - value of currently choosen country e.g. PL
   2. countries - list of all avaiable countries (array)
   3. l - translations for noCountrySelected and deliveryCountry (object)
   4. change - event for change currently choosen country, takes country code as parameter e.g. PL

2. delivery-methods receives:

   1. value - id of currently choosen delivery method e.g. afc3d72a-68f7-46d9-9c09-2dee35a49816
   2. methods - list of available shipping methods (array)
   3. l - translations for deliveryMethod, noDeliveryMethods, deliveryIn, days (object)
   4. change - event for change currently choosen shipping method, takes id as parameter

3. delivery-address receives:

   1. value - whole form object
   2. allowInvoice - true if invoice is allowed, false otherway
   3. isInvoice - currently state of isInvoice (boolean)
   4. l - translations with structure of: address, invoice, form: { name, address: formAddress, postCode, city, email, phone, comment }
   5. update - event for update delivery address, takes form object
   6. switchInvoice - event for switch visibility of invoice form, takes no arguments

4. delivery-address-invoice receives:

   1. formData - whole form.invoiceAddress object
   2. l - translations with structure of: invoiceDetails, form: { companyName, companyAddress, postCode, city, vat }
   3. update - event for update invoice address, takes form.invoiceAddress object

5. delivery-state-checkout receives:

   1. isAccepted - value of isStatuteAccepted (boolean)
   2. l - translations with structure of: consets, statute: { accept, statute }
   3. switch - event for switch statute acceptation, takes no arguments

6. items receives:

   1. items - list of products in the cart (array)
   2. lock - true if child component(<cart-item>) is not allowed to be removed or its quantity can't be modified, false otherway

7. coupon-code receives:

   1. coupon-code - coupon code e.g. 301H8WWC (string)
   2. cartValue - total value of products in the cart (with sales applied)
   3. l - translations with structure of: { label, applied, codeDoesNotExists, codeUnavaliable}
   4. coupon - event for coupon apply, takes coupon object

8. summary-coupons receives:

   1. coupons - list of applied coupons (array of coupon objects)
   2. title - translation of appliedCoupons
   3. couponRemove - event for coupon remove, takes id of coupon e.g. 07133fe8-6b42-4527-8edf-66df8c064874 (string)

9. summary-sales receives:

   1. sales - list of sales (array)
   2. title - translation of appliedSales

10. summary-details receives:

    1. cartTotalInitial - total value of products in the cart (without sales applied)
    2. cartTotalDiscount - total value of discount
    3. shippingPriceInitial - initial value of shipping
    4. shippingPriceDiscount - discounted value of shipping
    5. totalOrderAmount - final value of order
    6. l - translation with structure of: { cart, discount, delivery, total }

11. summary-buttons receives:

    1. isLoading - (boolean)
    2. disabled - (boolean)
    3. backToShopLink - URL to main page
    4. l - translation with structure of: { buy, return: returnToShopUrl }