Provides a block with a textfield and a button allowing quickly add any product
to cart by typing a variation title and / or SKU in the textfield and then
pressing Add to cart button.
Tip: you can see this file in your browser by clicking the admin/help# link at the right of the Admin toolbar and then the admin/help/commerce_quick_purchase# link in the list.
Note that variation added to a cart will be combined with the same variations if the Combine order items setting on a product type of the variation defines this. Also, the variation will be added with the default quantity existing on the order item type used by the variation. Currently, the default quantity is equal to 1 and cannot be set from the UI but you may use the Commerce Extended Quantity ↗ module forcing a user to add a particular quantity to the cart and disallowing changes on the value. Also note if the variation is out of stock it will not be added to the cart.
Any number of blocks could be placed under different variation availability and block visibility conditions.
- admin/help/commerce_quick_purchase#set-up
- admin/help/commerce_quick_purchase#redirection
- admin/help/commerce_quick_purchase#autocompletion
- admin/help/commerce_quick_purchase#autocomplete-threshold
- admin/help/commerce_quick_purchase#show-price
- admin/help/commerce_quick_purchase#button-text
- admin/help/commerce_quick_purchase#image-button
- admin/help/commerce_quick_purchase#placeholder
- admin/help/commerce_quick_purchase#description
- admin/help/commerce_quick_purchase#default-value
- admin/help/commerce_quick_purchase#inline-template
- admin/help/commerce_quick_purchase#external-template
- admin/help/commerce_quick_purchase#library
- admin/help/commerce_quick_purchase#variations-availability
- admin/help/commerce_quick_purchase#block-visibility
- admin/help/commerce_quick_purchase#product-field-block-visibility-condition
- admin/help/commerce_quick_purchase#pane-block-example
- admin/help/commerce_quick_purchase#image-button-example
- admin/help/commerce_quick_purchase#module-author
- Commerce Quick Purchase on drupal.org ↗
- Commerce Quick Purchase on github.com ↗
Go to the admin/structure/block page, choose a
desirable region and press the Place block button. In the appeared pop-up
window find the Quickly add any product to cart block and press Place block
button at the right. When saving the block in the first time it is recommended
to set up a custom machine name for the block because it is the only chance when
you can do this. You may need it to create a group of related blocks which
should use a
common CSS and / or JS admin/help/commerce_quick_purchase#library.
Call it for example my_pizza_pane_block_1, the next in the same category will
be my_pizza_pane_block_2, etc..
Note that full set of the features will become accessible only after saving the
block. So, for the first time just accept all default settings and then
press Configure button to make the final set up.
After pressing Add to cart button a user can be redirected to:
- No redirection
- Redirection on cart page
- Redirection on checkout page
- Redirection on the selected product variation page
When the variation page is chosen then there is an additional option to not add variation to a cart. Use it if you want a customer to decide on the action or just for searching required variations. When arrived on the cart page it will be scrolled down to the actual cart into which the current variation was added. Quite useful on a site with multiple stores.
There might be cases when you don't need autocompletion feature and instead want a customer to enter a before known for them variation title and / or SKU value in the textfield.
The maximum is one hundred suggestions. Can be used to reduce a lag between typing a text and actual appearing of suggestions below the field. Note that suggestions are divided equally between variation title and SKU. So, ideally when typing the letter a your user will get 50 suggestions of variations having a in the title and 50 suggestions having a in the SKU.
Hide price in the autocomplete suggestions if you don't need it. Can make appearing of suggestions a little faster.
Set up any text which is appropriate for your needs instead of
the Add to cart default text. For example, you may set the text
to Go to value when admin/help/commerce_quick_purchase#redirection
to a variation page and not adding it to a cart. Note that this text also will
be used for a title and alt attributes if you opt in to use an image as
the Add to cart button.
The image to click at and get the product variation added to cart. Can be absolute or relative URL of the image. Examples:
- https://example.com/path/to/my-folder/my-image.png
- path/to/my-folder/my-image.png
For a default the cart image ↗ from the base Drupal Commerce module is used.
The text that will be shown inside the field until a value is entered. This hint is usually a sample value or a brief description of the expected format.
The text that will be shown below the field to give a more verbose instructions for a customer on the field usage.
Product variaton title and / or SKU to display in the textfield by default. When using autocompletion it is recommended to save Variations availability settings first (if you need a non-default availability set up). It's because exactly those settings are used to filter out available variations on the field. Also note that inline template feature below can only be used if this field has a valid value.
If the Default value has a valid value then an inline template can be used to present default variation for a user instead of the textfield. The default template is provided to give an example of the feature usage.
Instead of the Inline template you may create a reusable template in your custom module and insert the template name instead of HTML / Twig code in the field.
First, implement hook_theme() and declare a template
in your_module.module file. Like it is done in the commerce_quick_purchase
module:
@PHPFILE: commerce_quick_purchase.module LINE:16 PADD:5 :PHPFILE@
Second, define the template, like it is done in the
templates/commerce-quick-purchase-template-example.html.twig file:
@PHPFILE: modules/contrib/commerce_quick_purchase/templates/commerce-quick-purchase-template-example.html.twig :PHPFILE@
Note that .html.twig file's name should be the same as
in your_module.module's hook_theme() but only separated by dashes instead of
underscores. Also, note the library attached right from the template which is
the alternative way to attaching it through the Library field
below. Read more ↗
You may define your own Drupal library ↗ and use it to style an individual block or a group of blocks. The example on how to create a group of blocks might be found from the admin/help/commerce_quick_purchase#set-up.
Restricts variations which could be accessed from the block. Note when negating availability condition only Published / Active and Price conditions have sense to negate all of them. Just because theoretically there might exist a variation which is inactive and member of unpublished product at the same time. But if you have three stores in total and they are all checked and negated then no variations will be available.
So, be sensible when using this feature. Though you don't need to figure out the
availability manually. The module is smart enough and will emit a warning on the
attempt to save a block having no one available variation. Also, note that if
variations will become unavailable later (unpublished, set inactive, deleted,
etc.) then the textfield and Add to cart button on the block will be
automatically disabled.
Leave all visibibility conditions empty if you want current block to be visible everywhere. Use conjunction operator AND if you want all conditions to pass. For example you may choose some store(s) AND product type(s) AND role(s) of the current user. But if you'll add to these conditions the node type(s) condition, then probably your block will disappear at all. Just because node and product entities can't co-exist in the same route context. For this case the OR conjunction operator might be used. So, if at least one of the conditions options will be found in the route and pass then the block will become visible. With Negate the condition option works the same rule as for the admin/help/commerce_quick_purchase#variations-availability section: if you have three stores in total and they are all checked and negated, then your block will disappear everywhere in case of the AND conjunction operator or, if conjunction operator is OR and no other conditions exist.
An experimental feature. Requires Field Condition ↗ module. Also, the following patches needs to be applied in case if they not commited yet:
- https://www.drupal.org/project/2841077/issues/2955776
- https://www.drupal.org/project/2841077/issues/2955778
- https://www.drupal.org/project/2841077/issues/2955781
- https://www.drupal.org/project/2841077/issues/2955782
Create three products of the default type each having one variation like this one:
Create three Quickly add any product to cart blocks placing them into the Content region and making the following settings for each of the blocks:
Note that Default value field value may differ on your set up, so use autocompletion to find the actual product variation you've created for this example.
You may even create pane blocks with clickable images working as
an Add to cart button.
Create Pizza attribute with the following values:
- Pepperoni
- Zesty Veggie
- Hawaiian
Create variation type with the attribute and a product type with this variation type and then an example Pizza product. Like this one:
Create three Quickly add any product to cart blocks placing them into the Content region and making the following settings for each of the blocks:
Note that Default value field value may differ on your set up, so use autocompletion to find the actual product variation you've created for this example.
The images might be found in the module's images folder and will have pepperoni.png, zesty_veggie.png and hawaiian.png image names for each of the blocks respectively.
Vlad Proshin (drugan)
[[email protected]]([email protected])
[https://drupal.org/u/drugan](https://drupal.org/u/drugan)