checkout process-add new step in checkout process

How to configure and adapt Aimeos based shops as developer
Forum rules
Always add your Aimeos and PHP version as well as your environment (Linux/Mac/Win)
khizar
Posts: 41
Joined: 19 Jan 2021, 09:51

checkout process-add new step in checkout process

Post by khizar » 23 Feb 2021, 07:33

hi aimeos,
i am using aimeos with laravel.
laravel version : laravel 8
aimeos version: "~2020.10"

i have given a task to add an additional step in checkoutprocess after address
Image
for that purpose i have created a subpart
in directory
ext\moudhah\client\html\src\Client\Html\Checkout\Standard\SendOtp

Code: Select all

	<?php

/**
 * @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
 * @copyright Metaways Infosystems GmbH, 2013
 * @copyright Aimeos (aimeos.org), 2015-2020
 * @package Client
 * @subpackage Html
 */


namespace Aimeos\Client\Html\Checkout\Standard\SendOtp;


// Strings for translation
sprintf( 'address' );


/**
 * Default implementation of checkout address HTML client.
 *
 * @package Client
 * @subpackage Html
 */
class Standard
	extends \Aimeos\Client\Html\Common\Client\Factory\Base
	implements \Aimeos\Client\Html\Common\Client\Factory\Iface
{
	
	/** client/html/checkout/standard/address/standard/subparts
	 * List of HTML sub-clients rendered within the checkout standard address section
	 *
	 * The output of the frontend is composed of the code generated by the HTML
	 * clients. Each HTML client can consist of serveral (or none) sub-clients
	 * that are responsible for rendering certain sub-parts of the output. The
	 * sub-clients can contain HTML clients themselves and therefore a
	 * hierarchical tree of HTML clients is composed. Each HTML client creates
	 * the output that is placed inside the container of its parent.
	 *
	 * At first, always the HTML code generated by the parent is printed, then
	 * the HTML code of its sub-clients. The order of the HTML sub-clients
	 * determines the order of the output of these sub-clients inside the parent
	 * container. If the configured list of clients is
	 *
	 *  array( "subclient1", "subclient2" )
	 *
	 * you can easily change the order of the output by reordering the subparts:
	 *
	 *  client/html/<clients>/subparts = array( "subclient1", "subclient2" )
	 *
	 * You can also remove one or more parts if they shouldn't be rendered:
	 *
	 *  client/html/<clients>/subparts = array( "subclient1" )
	 *
	 * As the clients only generates structural HTML, the layout defined via CSS
	 * should support adding, removing or reordering content by a fluid like
	 * design.
	 *
	 * @param array List of sub-client names
	 * @since 2014.03
	 * @category Developer
	 */
	private $subPartPath = 'client/html/checkout/standard/sendotp/standard/subparts';

	/** client/html/checkout/standard/address/billing/name
	 * Name of the billing part used by the checkout standard address client implementation
	 *
	 * Use "Myname" if your class is named "\Aimeos\Client\Checkout\Standard\Address\Billing\Myname".
	 * The name is case-sensitive and you should avoid camel case names like "MyName".
	 *
	 * @param string Last part of the client class name
	 * @since 2014.03
	 * @category Developer
	 */

	/** client/html/checkout/standard/address/delivery/name
	 * Name of the delivery part used by the checkout standard address client implementation
	 *
	 * Use "Myname" if your class is named "\Aimeos\Client\Checkout\Standard\Address\Delivery\Myname".
	 * The name is case-sensitive and you should avoid camel case names like "MyName".
	 *
	 * @param string Last part of the client class name
	 * @since 2014.03
	 * @category Developer
	 */
	private $subPartNames = [];


	/**
	 * Returns the HTML code for insertion into the body.
	 *
	 * @param string $uid Unique identifier for the output if the content is placed more than once on the same page
	 * @return string HTML code
	 */
	public function getBody( string $uid = '' ) : string
	{
        
		$view = $this->getView();
		$step = $view->get( 'standardStepActive', 'sendotp' );
		$onepage = $view->config( 'client/html/checkout/standard/onepage', [] );

		if( $step != 'sendotp' && !( in_array( 'sendotp', $onepage ) && in_array( $step, $onepage ) ) ) {
			return '';
		}

		$html = '';
		foreach( $this->getSubClients() as $subclient ) {
			$html .= $subclient->setView( $view )->getBody( $uid );
		}
		$view->sendotpBody = $html;

		/** client/html/checkout/standard/address/standard/template-body
		 * Relative path to the HTML body template of the checkout standard address client.
		 *
		 * The template file contains the HTML code and processing instructions
		 * to generate the result shown in the body of the frontend. The
		 * configuration string is the path to the template file relative
		 * to the templates directory (usually in client/html/templates).
		 *
		 * You can overwrite the template file configuration in extensions and
		 * provide alternative templates. These alternative templates should be
		 * named like the default one but with the string "standard" replaced by
		 * an unique name. You may use the name of your project for this. If
		 * you've implemented an alternative client class as well, "standard"
		 * should be replaced by the name of the new class.
		 *
		 * @param string Relative path to the template creating code for the HTML page body
		 * @since 2014.03
		 * @category Developer
		 * @see client/html/checkout/standard/address/standard/template-header
		 */
		$tplconf = 'client/html/checkout/standard/sendotp/standard/template-body';
		$default = 'checkout/standard/sendotp-body-standard';

		return $view->render( $view->config( $tplconf, $default ) );
	}


	
}

and after that i created a template sendotp-body-standard.php
in directory ext\moudhah\client\html\templates\checkout\standard

Code: Select all

	<?php

/**
 * @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
 * @copyright Metaways Infosystems GmbH, 2013
 * @copyright Aimeos (aimeos.org), 2015-2020
 */

$enc = $this->encoder();

?>
<?php $this->block()->start( 'checkout/standard/sendotp' ); ?>
<section class="checkout-standard-address">

	


	<div class="form-horizontal row">
		<input type="text" class="form-control">
	</div>


	<div class="button-group">
		<a class="btn btn-default btn-lg btn-back" href="<?= $enc->attr( $this->get( 'standardUrlBack' ) ); ?>">
			<?= $enc->html( $this->translate( 'client', 'Previous' ), $enc::TRUST ); ?>
		</a>
		<button class="btn btn-primary btn-lg btn-action">
			<?= $enc->html( $this->translate( 'client', 'Next' ), $enc::TRUST ); ?>
		</button>
	</div>

</section>
<?php $this->block()->stop(); ?>
<?= $this->block()->get( 'checkout/standard/sendotp' ); ?>
now at first i want to show sendotp step as a 3rd step in navigation bar in checkout process so please guide me how can i achieve this do i have to add some cofiguration or something else that i am missing.
please note that above in my standard class(sendotp component) i only included getbody method i know there are methods
which i have to include but at first i want to see the option in checkout process so please guide me how can i achieve this task
Image

khizar
Posts: 41
Joined: 19 Jan 2021, 09:51

Re: checkout process-add new step in checkout process

Post by khizar » 24 Feb 2021, 04:58

waiting for reply

User avatar
aimeos
Administrator
Posts: 4843
Joined: 01 Jan 1970, 00:00

Re: checkout process-add new step in checkout process

Post by aimeos » 24 Feb 2021, 08:22

Use this configuration to add your new subpart in between:
https://aimeos.org/docs/2020.x/config/c ... /#subparts
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

khizar
Posts: 41
Joined: 19 Jan 2021, 09:51

Re: checkout process-add new step in checkout process

Post by khizar » 24 Feb 2021, 10:27

aimeos wrote: 24 Feb 2021, 08:22 Use this configuration to add your new subpart in between:
https://aimeos.org/docs/2020.x/config/c ... /#subparts
hey aimeos ,
i added a new subpart by attempting following steps:
1) adding in the configuration file

Code: Select all

.......
	'checkout' => [
				'standard' => [
					'standard' => [
						'subparts' => ['address','sendotp','delivery','payment','summary','process'],

					]
				]
				

			],
........
2) creating a file in directory ext\moudhah\client\html\src\Client\Html\Checkout\Standard\SendOtp
file name(Standard.php)

Code: Select all

	<?php

/**
 * @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
 * @copyright Metaways Infosystems GmbH, 2013
 * @copyright Aimeos (aimeos.org), 2015-2020
 * @package Client
 * @subpackage Html
 */


namespace Aimeos\Client\Html\Checkout\Standard\SendOtp;


// Strings for translation
sprintf( 'address' );


/**
 * Default implementation of checkout address HTML client.
 *
 * @package Client
 * @subpackage Html
 */
class Standard
	extends \Aimeos\Client\Html\Common\Client\Factory\Base
	implements \Aimeos\Client\Html\Common\Client\Factory\Iface
{
	
	/** client/html/checkout/standard/address/standard/subparts
	 * List of HTML sub-clients rendered within the checkout standard address section
	 *
	 * The output of the frontend is composed of the code generated by the HTML
	 * clients. Each HTML client can consist of serveral (or none) sub-clients
	 * that are responsible for rendering certain sub-parts of the output. The
	 * sub-clients can contain HTML clients themselves and therefore a
	 * hierarchical tree of HTML clients is composed. Each HTML client creates
	 * the output that is placed inside the container of its parent.
	 *
	 * At first, always the HTML code generated by the parent is printed, then
	 * the HTML code of its sub-clients. The order of the HTML sub-clients
	 * determines the order of the output of these sub-clients inside the parent
	 * container. If the configured list of clients is
	 *
	 *  array( "subclient1", "subclient2" )
	 *
	 * you can easily change the order of the output by reordering the subparts:
	 *
	 *  client/html/<clients>/subparts = array( "subclient1", "subclient2" )
	 *
	 * You can also remove one or more parts if they shouldn't be rendered:
	 *
	 *  client/html/<clients>/subparts = array( "subclient1" )
	 *
	 * As the clients only generates structural HTML, the layout defined via CSS
	 * should support adding, removing or reordering content by a fluid like
	 * design.
	 *
	 * @param array List of sub-client names
	 * @since 2014.03
	 * @category Developer
	 */
	private $subPartPath = 'client/html/checkout/standard/sendotp/standard/subparts';

	/** client/html/checkout/standard/address/billing/name
	 * Name of the billing part used by the checkout standard address client implementation
	 *
	 * Use "Myname" if your class is named "\Aimeos\Client\Checkout\Standard\Address\Billing\Myname".
	 * The name is case-sensitive and you should avoid camel case names like "MyName".
	 *
	 * @param string Last part of the client class name
	 * @since 2014.03
	 * @category Developer
	 */

	/** client/html/checkout/standard/address/delivery/name
	 * Name of the delivery part used by the checkout standard address client implementation
	 *
	 * Use "Myname" if your class is named "\Aimeos\Client\Checkout\Standard\Address\Delivery\Myname".
	 * The name is case-sensitive and you should avoid camel case names like "MyName".
	 *
	 * @param string Last part of the client class name
	 * @since 2014.03
	 * @category Developer
	 */
	private $subPartNames = [];


	/**
	 * Returns the HTML code for insertion into the body.
	 *
	 * @param string $uid Unique identifier for the output if the content is placed more than once on the same page
	 * @return string HTML code
	 */
	public function getBody( string $uid = '' ) : string
	{
        
		$view = $this->getView();
		$step = $view->get( 'standardStepActive', 'sendotp' );
		$onepage = $view->config( 'client/html/checkout/standard/onepage', [] );

		if( $step != 'sendotp' && !( in_array( 'sendotp', $onepage ) && in_array( $step, $onepage ) ) ) {
			return '';
		}

		$html = '';
		foreach( $this->getSubClients() as $subclient ) {
			$html .= $subclient->setView( $view )->getBody( $uid );
		}
		$view->sendotpBody = $html;

		/** client/html/checkout/standard/address/standard/template-body
		 * Relative path to the HTML body template of the checkout standard address client.
		 *
		 * The template file contains the HTML code and processing instructions
		 * to generate the result shown in the body of the frontend. The
		 * configuration string is the path to the template file relative
		 * to the templates directory (usually in client/html/templates).
		 *
		 * You can overwrite the template file configuration in extensions and
		 * provide alternative templates. These alternative templates should be
		 * named like the default one but with the string "standard" replaced by
		 * an unique name. You may use the name of your project for this. If
		 * you've implemented an alternative client class as well, "standard"
		 * should be replaced by the name of the new class.
		 *
		 * @param string Relative path to the template creating code for the HTML page body
		 * @since 2014.03
		 * @category Developer
		 * @see client/html/checkout/standard/address/standard/template-header
		 */
		$tplconf = 'client/html/checkout/standard/sendotp/standard/template-body';
		$default = 'checkout/standard/sendotp-body-standard';

		return $view->render( $view->config( $tplconf, $default ) );
	}


	/**
	 * Returns the HTML string for insertion into the header.
	 *
	 * @param string $uid Unique identifier for the output if the content is placed more than once on the same page
	 * @return string|null String including HTML tags for the header on error
	 */
	public function getHeader( string $uid = '' ) : ?string
	{  
		$view = $this->getView();
		$step = $view->get( 'standardStepActive' );
		$onepage = $view->config( 'client/html/checkout/standard/onepage', [] );

		if( $step != 'address' && !( in_array( 'address', $onepage ) && in_array( $step, $onepage ) ) ) {
			return '';
		}

		return parent::getHeader( $uid );
	}


	/**
	 * Returns the sub-client given by its name.
	 *
	 * @param string $type Name of the client type
	 * @param string|null $name Name of the sub-client (Default if null)
	 * @return \Aimeos\Client\Html\Iface Sub-client object
	 */
	public function getSubClient( string $type, string $name = null ) : \Aimeos\Client\Html\Iface
	{   
		/** client/html/checkout/standard/address/decorators/excludes
		 * Excludes decorators added by the "common" option from the checkout standard address html client
		 *
		 * Decorators extend the functionality of a class by adding new aspects
		 * (e.g. log what is currently done), executing the methods of the underlying
		 * class only in certain conditions (e.g. only for logged in users) or
		 * modify what is returned to the caller.
		 *
		 * This option allows you to remove a decorator added via
		 * "client/html/common/decorators/default" before they are wrapped
		 * around the html client.
		 *
		 *  client/html/checkout/standard/address/decorators/excludes = array( 'decorator1' )
		 *
		 * This would remove the decorator named "decorator1" from the list of
		 * common decorators ("\Aimeos\Client\Html\Common\Decorator\*") added via
		 * "client/html/common/decorators/default" to the html client.
		 *
		 * @param array List of decorator names
		 * @since 2015.08
		 * @category Developer
		 * @see client/html/common/decorators/default
		 * @see client/html/checkout/standard/address/decorators/global
		 * @see client/html/checkout/standard/address/decorators/local
		 */

		/** client/html/checkout/standard/address/decorators/global
		 * Adds a list of globally available decorators only to the checkout standard address html client
		 *
		 * Decorators extend the functionality of a class by adding new aspects
		 * (e.g. log what is currently done), executing the methods of the underlying
		 * class only in certain conditions (e.g. only for logged in users) or
		 * modify what is returned to the caller.
		 *
		 * This option allows you to wrap global decorators
		 * ("\Aimeos\Client\Html\Common\Decorator\*") around the html client.
		 *
		 *  client/html/checkout/standard/address/decorators/global = array( 'decorator1' )
		 *
		 * This would add the decorator named "decorator1" defined by
		 * "\Aimeos\Client\Html\Common\Decorator\Decorator1" only to the html client.
		 *
		 * @param array List of decorator names
		 * @since 2015.08
		 * @category Developer
		 * @see client/html/common/decorators/default
		 * @see client/html/checkout/standard/address/decorators/excludes
		 * @see client/html/checkout/standard/address/decorators/local
		 */

		/** client/html/checkout/standard/address/decorators/local
		 * Adds a list of local decorators only to the checkout standard address html client
		 *
		 * Decorators extend the functionality of a class by adding new aspects
		 * (e.g. log what is currently done), executing the methods of the underlying
		 * class only in certain conditions (e.g. only for logged in users) or
		 * modify what is returned to the caller.
		 *
		 * This option allows you to wrap local decorators
		 * ("\Aimeos\Client\Html\Checkout\Decorator\*") around the html client.
		 *
		 *  client/html/checkout/standard/address/decorators/local = array( 'decorator2' )
		 *
		 * This would add the decorator named "decorator2" defined by
		 * "\Aimeos\Client\Html\Checkout\Decorator\Decorator2" only to the html client.
		 *
		 * @param array List of decorator names
		 * @since 2015.08
		 * @category Developer
		 * @see client/html/common/decorators/default
		 * @see client/html/checkout/standard/address/decorators/excludes
		 * @see client/html/checkout/standard/address/decorators/global
		 */

		return $this->createSubClient( 'checkout/standard/address/' . $type, $name );
	}


	/**
	 * Processes the input, e.g. store given values.
	 *
	 * A view must be available and this method doesn't generate any output
	 * besides setting view variables.
	 */
	public function process()
	{	
		
		$view = $this->getView();

		try
		{
			
			parent::process();

			$context = $this->getContext();
			
			if( ( $param = $view->param( 'ca_extra' ) ) !== null ) {
				
				$context->getSession()->set( 'client/html/checkout/standard/sendotp/extra', (array) $param );
			}

			
			
			
			if( ( $view->param( 'c_step' ) ) == 'delivery' ) {
				
				$otp = $view->param( 'otp' );
				$hiddenOtp = $view->param( 'hiddenOtp' );
				
				if($otp == ''){
					
					throw new \Aimeos\Client\Html\Exception( sprintf( 'OTP is required to proceed' ) );
				}else if($hiddenOtp != $otp){
					throw new \Aimeos\Client\Html\Exception( sprintf( 'Invalid OTP' ) );
				}
			}

			$addresses = \Aimeos\Controller\Frontend::create( $context, 'basket' )->get()->getAddresses();

			// Test if addresses are available
			if( !isset( $view->standardStepActive ) && count( $addresses ) === 0 )
			{
				$view->standardStepActive = 'sendotp';
				return;
			}
		}
		catch( \Exception $e )
		{
			$this->getView()->standardStepActive = 'sendotp';
			throw $e;
		}
	}







	/**
	 * Returns the list of sub-client names configured for the client.
	 *
	 * @return array List of HTML client names
	 */
	protected function getSubClientNames() : array
	{   
		return $this->getContext()->getConfig()->get( $this->subPartPath, $this->subPartNames );
	}


	/**
	 * Sets the necessary parameter values in the view.
	 *
	 * @param \Aimeos\MW\View\Iface $view The view object which generates the HTML output
	 * @param array &$tags Result array for the list of tags that are associated to the output
	 * @param string|null &$expire Result variable for the expiration date of the output (null for no expiry)
	 * @return \Aimeos\MW\View\Iface Modified view object
	 */


	
	
}


3) creating a template file in directory ext\moudhah\client\html\templates\checkout\standard
file name(sendotp-body-standard.php)

Code: Select all

<?php

/**
 * @license LGPLv3, http://opensource.org/licenses/LGPL-3.0
 * @copyright Metaways Infosystems GmbH, 2013
 * @copyright Aimeos (aimeos.org), 2015-2020
 */

$enc = $this->encoder();

?>
<?php $this->block()->start( 'checkout/standard/sendotp' ); ?>
<section class="checkout-standard-address">
	
	

	
<div class="row form-item form-group">

	<label class="col-md-2 text-right">
		<?= $enc->html( $this->translate( 'client', 'Enter Otp' ), $enc::TRUST ); ?>
	</label>
	<div class="col-md-4">
		<input class="form-control" type="text" id="otp" name="otp" value="<?= $this->get('hiddenOtp') ?>"/>
		<input type="hidden" value="<?= $this->get('hiddenOtp') ?>" id="hiddenOtp" name="hiddenOtp">
		
	</div>
</div>


	<div class="button-group">
		<a class="btn btn-default btn-lg btn-back" href="<?= $enc->attr( $this->get( 'standardUrlBack' ) ); ?>">
			<?= $enc->html( $this->translate( 'client', 'Previous' ), $enc::TRUST ); ?>
		</a>
		<button class="btn btn-primary btn-lg btn-action">
			<?= $enc->html( $this->translate( 'client', 'Next' ), $enc::TRUST ); ?>
		</button>
	</div>

</section>
<?php $this->block()->stop(); ?>
<?= $this->block()->get( 'checkout/standard/sendotp' ); ?>
so it added successfully you can see in the picture given below


Image
after that i added a fileld in ADDRESS subpart by overwritng the template file in my extension
Image
as you can see in the image field is added successfully
now i have to problems
1) i want to generate a random number(otp) and send it to the mobile number which i have added in the address subpart
when the next button is clicked on the address subpart,to achieve this task i created a file Standard.php in my extension
ext\moudhah\client\html\src\Client\Html\Checkout\Standard\Address and copied the standard class from the
directory ext\ai-client-html\client\html\src\Client\Html\Checkout\Standard\Address and added that code in the process method but that method is not called i mean aimeos is calling the process method of client extension instead
of calling the method from my custom extension so please guide do i have to add some configuaration in order to make it
work or some thing else.
2) my second problem is that i want to hide that sendotp step when user is logged in .Is there any way to achieve that task

khizar
Posts: 41
Joined: 19 Jan 2021, 09:51

Re: checkout process-add new step in checkout process

Post by khizar » 24 Feb 2021, 11:08

waiting for reply aimeos

khizar
Posts: 41
Joined: 19 Jan 2021, 09:51

Re: checkout process-add new step in checkout process

Post by khizar » 25 Feb 2021, 10:40

waiting for reply

User avatar
aimeos
Administrator
Posts: 4843
Joined: 01 Jan 1970, 00:00

Re: checkout process-add new step in checkout process

Post by aimeos » 26 Feb 2021, 07:39

1.) You have to add your code for sending the code in your SendOtp class
2.) You may change the subparts configuration dynamically based on the login status if you extend the checkout/standard component class
Professional support and custom implementation are available at Aimeos.com
If you like Aimeos, Image give us a star

Post Reply