Code Monkey home page Code Monkey logo

add-to-cart-button's Introduction

📢 Use this project, contribute to it or open issues to help evolve it using Store Discussion.

Add To Cart Button

All Contributors

The add-to-cart-button block is designed to add products to the Minicart (minicart.v2).

image

⚠️ The Add to Cart button is only compatible with stores using Minicart v2. For these stores, it will function correctly on the Shelf component and the Product Details page. If you are using Minicart v1, you should configure the Buy Button block on the Product Details page and the Product Summary Buy button on the Shelf component instead.

Configuration

  1. Import the vtex.add-to-cart-button app to your theme dependencies in the manifest.json file, as follows:
"dependencies": {
  "vtex.add-to-cart-button": "0.x"
}
  1. Add the add-to-cart-button to another theme block using the product context, such as the product-summary.shelf. In the example below, the add-to-cart-button is added to the flex-layout.row block from the store.product template, which uses the product context:
  "store.product": {
    "children": [
      "flex-layout.row#product",
    ]
  },
  "flex-layout.row#product": {
    "children": [
      "add-to-cart-button"
    ]
  }
Prop name Type Description Default value
onClickBehavior enum Controls what happens when users click the button. Possible values are: go-to-product-page, add-to-cart, and ensure-sku-selection (if multiple SKUs are available, users will be redirected to the product page to select the desired one. If the product only has 1 SKU available, it will be automatically added to the cart when the button is clicked). add-to-cart
onClickEventPropagation enum Controls whether the 'onClick' event, triggered upon user clicks, should propagate to the parent elements of the page. Possible values are: disabled and enabled. disabled
isOneClickBuy boolean Determines whether the user should be redirected to the checkout page (true) or not (false) when the Add to Cart button is clicked. false
customOneClickBuyLink string Defines the link to which users will be redirected when the Add to Cart button is clicked, and the isOneClickBuy prop is set to true. /checkout/#/cart
customToastUrl string Defines the link to which users will be redirected when the toast (pop-up notification displayed when adding an item to the minicart) is clicked. /checkout/#/cart
text string Defines a custom text message to be displayed on the Add to Cart button. Add to cart (automatic translation will be applied following your store default language)
unavailableText string Defines a custom text message to be displayed on the Add to Cart button when a product is unavailable. Unavailable (automatic translation will be applied following your store default language)
customPixelEventId string Defines the id for the event that the button will send upon user interaction. undefined

Customization

To apply CSS customizations to this and other blocks, follow the instructions in Using CSS Handles for store customization.

CSS Handles
buttonText
buttonDataContainer
tooltipLabelText

Contributors ✨

Thanks goes to these wonderful people:


Jean Nussenzveig

💻

Ygor Neves

💻

Lucas Pacheco

💻

This project follows the all-contributors specification. Contributions of any kind are welcome!

add-to-cart-button's People

Contributors

allcontributors[bot] avatar ataideverton avatar camilavcoutinho avatar carolinamenezes avatar daniserejo avatar filafb avatar georgelimadev avatar guerreirobeatriz avatar gustavopvasconcellos avatar iago1501 avatar icazevedo avatar igorbrasileiro avatar jeffersontuc avatar jgfidelis avatar kaio-donadelli avatar kaisermann avatar klynger avatar klzns avatar lucasecdb avatar marcoskwkm avatar polishq avatar rodrigotadeuf avatar sheilagomes avatar silviasfon avatar thalytafabrine avatar thayannevls avatar victorhmp avatar vitorflg avatar ygorneves10 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

add-to-cart-button's Issues

Add a 'Popup option' in app

Is your feature request related to a problem? Please describe.
It's not a problem really, but it would be nice if you could add the option to show a popup with the cart information. I know that in addition to the toaster, you can add a custom event, but there is no way to add a modal with cart information beyond display the minicart

Describe the solution you'd like
Create a new component that allows to display a modal with this information

Describe alternatives you've considered
Add 'custom event' as a prop and display a modal, but it does not show the purchase information or display the minicart but this second options its not very clear visually

Move static options object to AddToCartButton props

Is your feature request related to a problem? Please describe.
The minicart can show outdated prices when a store sets a default payment system like "Boleto" or "Pix" because the addItem functions its always called with these options:

const options = {
  allowedOutdatedData: ['paymentData'],
}

Describe the solution you'd like
Move these options to component props to allow overrides

Describe alternatives you've considered
Also can be a feature flag of store advancedSettings.

Additional context
You can test this behaviour following these steps:

  1. Update the orderForm config with this payload:
{
    "paymentConfiguration": {
        "requiresAuthenticationForPreAuthorizedPaymentOption": false,
        "allowInstallmentsMerge": null,
        "blockPaymentSession": null,
        "paymentSystemToCheckFirstInstallment": "6",
        "defaultPaymentSystemToApplyOnUserOrderForm": {
            "installment": 1,
            "paymentSystemId": "6"
        }
    },
    "taxConfiguration": null,
    "minimumQuantityAccumulatedForItems": 1,
    "decimalDigitsPrecision": 2,
    "minimumValueAccumulated": 0,
    "apps": [],
    "allowMultipleDeliveries": false,
    "allowManualPrice": true,
    "savePersonalDataAsOptIn": false,
    "maxNumberOfWhiteLabelSellers": null,
    "maskFirstPurchaseData": null,
    "recaptchaValidation": null,
    "recaptchaMinScore": null,
    "recaptchaKeys": null,
    "maskStateOnAddress": null
}
  1. Create a promotion of 5% linked to payment method "Boleto".
  2. Add a product to the minicart and validate if the price has the discount.

Funcionalidade de redirecionar a PDP

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Não é um problema, seria uma nova funcionalidade.

Describe the solution you'd like
A clear and concise description of what you want to happen.

O cliente solicitou um botão que redirecione à PDP em vez de adicionar diretamente ao carrinho.

Describe alternatives you've considered
A clear and concise description of any alternative solutions or features you've considered.

Estávamos utilizando para as lojas anteriores desse cliente o product summary buy button que tem essa funcionalidade, mas ao atualizarmos o minicart para a v2, o botão não funciona bem.

Additional context
Add any other context or screenshots about the feature request here.

Utiliza-lo em shelf y category page, para redirecionamento, já que sem a funcionalidade seleciona um sku qualquer e adiciona ao carrinho.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.