Checkout tag

The Checkout tag. This is the tag that is responsible for the whole checkout process.

The moulde is shipped with a ready-to-go template, however, you can still change everything to your needs.

The tag

{exp:reinos_store:checkout}

Tag Parameters

Below are the Tag Parameters. Those parameters can be used in the tag described above

customer_phone_required

Set the customer phone as required.

customer_phone_required="false"

customer_company_required

Set the customer company name as required.

customer_company_required="false"

return_url

The return url, default to the current url

return_url=""

form_class

Set the form class

form_class=""

form_id

Set the form id

form_id=""

enable_billing_address

Control wether the billing address fields are required or not.

enable_billing_address="yes" (default)

enable_shipping_address

Control wether the shipping address fields are required or not.

enable_shipping_address="yes" (default)

default fields

For all of the input fields you can define a default value via the default_<field_name> param

default_billing_address="Your default billing_address"
default_billing_address2="Your default billing_address2"
default_billing_city="Your default billing_city"
default_billing_country="Your default billing_country"
default_billing_zip="Your default billing_zip"
default_billing_state="Your default billing_state"
default_shipping_address="Your default shipping_address"
default_shipping_address2="Your default shipping_address2"
default_shipping_city="Your default shipping_city"
default_shipping_country="Your default shipping_country"
default_shipping_state="Your default shipping_state"
default_shipping_zip="Your default shipping_zip"
default_customer_first_name="Your default customer_first_name"
default_customer_last_name="Your default customer_last_name"
default_customer_email="Your default customer_email"
default_customer_phone="Your default customer_phone"
default_customer_company="Your default customer_company"
default_customer_tax_no="Your default customer_tax_no"

payment_gateway

With this param you can set the gateway. This is more a solution if you have just one gateway. If you have multiple gatewayes you should use {exp:reinos_store:gateway_list}

payment_gateway="paypal"

Tag Variable

Below are the Tag Variables. Those Variables can be used in the tag described above

global_errors

Global errors

{global_errors}
    {global_errors:error}
{/global_errors}

But we also have them as separated error variables

{global_error:no_items_to_checkout}
{global_error:gateway_not_exists}
{global_error:no_gateway_selected}
{global_error:transaction_error}
{global_error:shipping_type_missing} // coming from the shipping module

has_global_errors

Check for global errors

{if has_global_errors}
   {global_error}
{/if}

has_field_errors

Check for field errors

{if has_field_errors}
   ...
{/if}

field_name:error

Error, if there is one, per field

{customer_first_name:error}
{customer_last_name:error}
{customer_email:error}
{customer_phone:error}
{customer_company:error}
{billing_address:error}
{billing_address2:error}
{billing_zip:error}
{billing_city:error}
{billing_country:error}
{shipping_address:error}
{shipping_address2:error}
{shipping_zip:error}
{shipping_city:error}
{shipping_country:error}

{!-- for example --}
{if customer_company:error != ''}<span class="text-red">{customer_company:error}</span>{/if}

field_name:value

Values, if there is something, per field

{customer_first_name:value}
{customer_last_name:value}
{customer_email:value}
{customer_phone:value}
{customer_company:value}
{billing_address:value}
{billing_address2:value}
{billing_zip:value}
{billing_city:value}
{billing_country:value}
{shipping_address:value}
{shipping_address2:value}
{shipping_zip:value}
{shipping_city:value}
{shipping_country:value}

Steps

The example templates are using the stepping technique. Each step Personal and billing and shipping adress, Shipping and payment are a step in the order process. We enable this by adding the name name="step-1" name="step-2" or name="step-3" to the next button as you can seen in the example template

Available from v3.2.0

<button name="step-2" type="submit" class="button">Next step</button>

Custom fields

Add custom/extra fields to your checkout process.

You need to define the field names in custom_fields and in the body of {exp:reinos_store:checkout} you can add the actual HTML

{exp:reinos_store:checkout
    custom_fields="agree_with_terms|name|email"
}
    <input name="name" placeholder="custom_fields[name]" value={custom_fields:name:value} />
    <input name="email" type="custom_fields[email]" placeholder="email" value={custom_fields:email:value} />
    <input type="checkbox" name="custom_fields[agree_with_terms]" value="yes" {if '{custom_fields:agree_with_terms:value}' == 'yes'}checked{/if}/> Agree with the terms
{/exp:reinos_store:checkout}

Make them required

It is also possible to make the custom fields required by using custom_fields_required. This param accept a string, delimited by a pipeline | to set certain fields as required.

Available from v3.6.0

custom_fields_required="my_field|another_field|etc"

Required in the steps checkout

To make certain fields required when having a stepped checkout, you need to use the following param instead. Each param is set for a step to determine for which step a field is required. This wil also make sure the checkout is marking that field as required and set that step active.

{exp:reinos_store:checkout      
    custom_fields="custom_field_step_1|custom_field_step_2|custom_field_step_3"
    custom_fields_required_step_1="custom_field_step_1"
    custom_fields_required_step_2="custom_field_step_2"
    custom_fields_required_step_3="custom_field_step_3"
}

Example single page checkout

Here we make custom_field_1 and custom_field_3 required.

{exp:reinos_store:checkout      
  custom_fields="custom_field_step_1|custom_field_step_2|custom_field_step_3"
  custom_fields_required="custom_field_1|custom_field_3"
}

  <label for="custom_fields[custom_field_1]">Custom field 1</label>
  {if custom_fields:custom_field_1:error != ''}<span class="text-red">{custom_fields:custom_field_1:error}</span>{/if}
  <input type="text" class="input" id="custom_fields[custom_field_1]" name="custom_fields[custom_field_1]" value="{custom_fields:custom_field_1:value}">

  <label for="custom_fields[custom_field_1]">Custom field 2</label>
  <input type="text" class="input" id="custom_fields[custom_field_2]" name="custom_fields[custom_field_2]" value="{custom_fields:custom_field_2:value}">

  <label for="custom_fields[custom_field_3]">Custom field 3</label>
  {if custom_fields:custom_field_3:error != ''}<span class="text-red">{custom_fields:custom_field_3:error}</span>{/if}
  <input type="text" class="input" id="custom_fields[custom_field_3]" name="custom_fields[custom_field_3]" value="{custom_fields:custom_field_3:value}">


  {!-- you could also add a checkbox for agreeing with the terms of service here --}
  {!-- {if custom_fields:agree_with_terms:error != ''}<span class="text-red">{custom_fields:agree_with_terms:error}</span>{/if} --}
  {!-- <input type="checkbox" name="custom_fields[agree_with_terms]" value="yes"/>	Agree with the terms --}

  <div class="mt-8 flex justify-between">
    <a href="/index.php/reinos_store/checkout?step=2" class="button">Pervious step</a>
    <button name="step-3" type="submit" class="button">Checkout</button>
  </div>
{/exp:reinos_store:checkout}

Example Steps

Below an example in a stepped checkout

{exp:reinos_store:checkout      
  custom_fields="custom_field_step_1|custom_field_step_2|custom_field_step_3"
  custom_fields_required_step_1="custom_field_step_1"
  custom_fields_required_step_2="custom_field_step_2"
  custom_fields_required_step_3="custom_field_step_3"
}

  {if current_query_string == 'step=1' || current_query_string == ''}
    <label for="custom_fields[custom_field_step_1]">Custom field</label>
    {if custom_fields:custom_field_step_1:error != ''}<span class="text-red">{custom_fields:custom_field_step_1:error}</span>{/if}
    <input type="text" class="input" id="custom_fields[custom_field_step_1]" name="custom_fields[custom_field_step_1]" value="{custom_fields:custom_field_step_1:value}">

    <div class="mt-8 flex justify-between">
      <button name="step-1" type="submit" class="button ml-auto">Next step</button>
    </div>
  {/if}

  {if current_query_string == 'step=2'}            
    <label for="custom_fields[custom_field_step_2]">Custom field</label>
    {if custom_fields:custom_field_step_2:error != ''}<span class="text-red">{custom_fields:custom_field_step_2:error}</span>{/if}
    <input type="text" class="input" id="custom_fields[custom_field_step_2]" name="custom_fields[custom_field_step_2]" value="{custom_fields:custom_field_step_2:value}">

    <div class="mt-8 flex justify-between">
      <a href="/index.php/reinos_store/checkout?step=1" class="button">Previous step</a>
      <button name="step-2" type="submit" class="button">Next step</button>
    </div>
  {/if}

  {if current_query_string == 'step=3'}
    <label for="custom_fields[custom_field_step_3]">Custom field</label>
    {if custom_fields:custom_field_step_3:error != ''}<span class="text-red">{custom_fields:custom_field_step_3:error}</span>{/if}
    <input type="text" class="input" id="custom_fields[custom_field_step_3]" name="custom_fields[custom_field_step_3]" value="{custom_fields:custom_field_step_3:value}">

    {!-- you could also add a checkbox for agreeing with the terms of service here --}
    {!-- {if custom_fields:agree_with_terms:error != ''}<span class="text-red">{custom_fields:agree_with_terms:error}</span>{/if} --}
    {!-- <input type="checkbox" name="custom_fields[agree_with_terms]" value="yes"/>	Agree with the terms --}

    <div class="mt-8 flex justify-between">
      <a href="/index.php/reinos_store/checkout?step=2" class="button">Pervious step</a>
      <button name="step-3" type="submit" class="button">Checkout</button>
    </div>
  {/if}
{/exp:reinos_store:checkout}