Create a module with Google API, Adress Autocomplete Form

[dydy59]

Hello, I'm writing to you because I'm in the final stages of developing a module to autocomplete customer addresses when they're in the order tunnel at the address stage.
I'm using Google's API, with Place Autocomplete Address Form. I opened the code with jsfiddle, and adapted the HTML code of the form, with the ids of my prestashop store to make the script work.
Everything works as expected on this site, but when I export the javascript code to my js file in my module folder and then to /views/js/ it doesn't work.

However, I've created a custom hook, which is grafted onto my module, and in my hook's function, I call the Google api and my JS file, which contains the script defined by Google.

Here are the contents of my files, if anyone knows where the problem might be coming from, thank you very much!

 

The main file who module is configure :

<?php
if (!defined('_PS_VERSION_')) {
    exit;
}
class GoogleAdressAutoComplete extends Module
{
    public function __construct()
    {
        $this->name = 'googleadressautocomplete';
        $this->version = '1.0.0';
        $this->author = 'Dylan Brisson';
        $this->need_instance = 0;
        $this->ps_versions_compliancy = [
            'min' => '1.7.8.7',
            'max' => _PS_VERSION_
        ];
        $this->bootstrap = true;

        parent::__construct();

        $this->displayName = $this->l('Google Adresse Autocomplete');
        $this->description = $this->l('Module qui permet de compléter automatiquement les adresses afin de faciliter les clients grâce à Google');

        $this->confirmUninstall = $this->l('Êtes-vous sûr de vouloir désinstaller ce module ?');
        if (!Configuration::get('GOOGLEADRESSAUTOCOMPLETE_PAGENAME')) {
            $this->warning = $this->l('Aucun nom fourni');
        }
    }
    public function install()
    {
        if (!parent::install() ||
            !$this->registerHook('displayGoogleAutoComplete') ||
            !Configuration::updateValue('GOOGLEADRESSAUTOCOMPLETE_PAGENAME', 'Google Adresse Autocomplete')
        ) {
            return false;
        }
        return true;
    }
public function uninstall()
{
    if (!parent::uninstall() ||
        !Configuration::deleteByName('GOOGLEADRESSAUTOCOMPLETE_PAGENAME')
    ) {
        return false;
    }

    return true;
}
public function hookdisplayGoogleAutoComplete($params)
{
    $this->context->controller->registerJavascript(
        'google_maps_api',
        'https://maps.googleapis.com/maps/api/js?key=API_KEY_HERE&callback=initAutocomplete&libraries=places',
        array('server' => 'remote', 'position' => 'bottom', 'priority' => 20)
    );

    $this->context->controller->registerJavascript(
        'module-googleadressautocomplete',
        'modules/googleadressautocomplete/views/js/googleadressautocomplete.js',
        ['position' => 'bottom', 'priority' => 200]
    );
}
}

And the hook call, according to several tests, I have to make it in the addresses.tpl file, and I make the call as follows who path is /themes/classic/templates/checkout/_partials/steps/addresses.tpl :

{**
 * Copyright since 2007 PrestaShop SA and Contributors
 * PrestaShop is an International Registered Trademark & Property of PrestaShop SA
 *
 * NOTICE OF LICENSE
 *
 * This source file is subject to the Academic Free License 3.0 (AFL-3.0)
 * that is bundled with this package in the file LICENSE.md.
 * It is also available through the world-wide-web at this URL:
 * https://opensource.org/licenses/AFL-3.0
 * If you did not receive a copy of the license and are unable to
 * obtain it through the world-wide-web, please send an email
 * to [email protected] so we can send you a copy immediately.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file if you wish to upgrade PrestaShop to newer
 * versions in the future. If you wish to customize PrestaShop for your
 * needs please refer to https://devdocs.prestashop.com/ for more information.
 *
 * @author    PrestaShop SA and Contributors <contact@prestashop.com>
 * @copyright Since 2007 PrestaShop SA and Contributors
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License 3.0 (AFL-3.0)
 *}

  {extends file='checkout/_partials/steps/checkout-step.tpl'}

      {block name='step_content'}
    <div class="js-address-form">

        {hook h='displayGoogleAutoComplete'}
      <form method="POST" action="
        {url entity='order' params=['id_address' => $id_address]}"
        data-refresh-url="
        {url entity='order' params=['ajax' => 1, 'action' => 'addressForm']}">

        {if $use_same_address}
          <p>

          {if $cart.is_virtual}

            {l s='The selected address will be used as your personal address (for invoice).' d='Shop.Theme.Checkout'}

          {else}

            {l s='The selected address will be used both as your personal address (for invoice) and as your delivery address.' d='Shop.Theme.Checkout'}

          {/if}
          </p>

        {else}

          {hook h='displayCheckoutAddressForm'}
          <h2 class="h4">
          {l s='Shipping Address' d='Shop.Theme.Checkout'}</h2>

        {/if}


        {if $show_delivery_address_form}
          <div id="delivery-address">
            {render file                      = 'checkout/_partials/address-form.tpl'
                                      ui                        = $address_form
                                      use_same_address          = $use_same_address
                                      type                      = "delivery"
                                      form_has_continue_button  = $form_has_continue_button
                                    }
          </div>

        {elseif $customer.addresses|count > 0}
          <div id="delivery-addresses" class="address-selector js-address-selector">
            {include  file        = 'checkout/_partials/address-selector-block.tpl'
                                      addresses   = $customer.addresses
                                      name        = "id_address_delivery"
                                      selected    = $id_address_delivery
                                      type        = "delivery"
                                      interactive = !$show_delivery_address_form and !$show_invoice_address_form
                                    }
          </div>

          {if isset($delivery_address_error)}
            <p class="alert alert-danger js-address-error" name="alert-delivery"
              id="id-failure-address-{$delivery_address_error.id_address}">{$delivery_address_error.exception}</p>

          {else}
            <p class="alert alert-danger js-address-error" name="alert-delivery" style="display: none">

            {l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>

          {/if}

          <p class="add-address">
            <a href="{$new_address_delivery_url}"><i
                class="material-icons">&#xE145;</i>
          {l s='add new address' d='Shop.Theme.Actions'}</a>
          </p>


          {if $use_same_address && !$cart.is_virtual}
            <p>
              <a data-link-action="different-invoice-address" href="{$use_different_address_url}">

            {l s='Billing address differs from shipping address' d='Shop.Theme.Checkout'}
              </a>
            </p>

          {/if}


        {/if}


        {if !$use_same_address}

          <h2 class="h4">
          {l s='Your Invoice Address' d='Shop.Theme.Checkout'}</h2>


          {if $show_invoice_address_form}
            <div id="invoice-address">
              {render file                      = 'checkout/_partials/address-form.tpl'
                                                    ui                        = $address_form
                                                    use_same_address          = $use_same_address
                                                    type                      = "invoice"
                                                    form_has_continue_button  = $form_has_continue_button
                                                  }
            </div>

          {else}
            <div id="invoice-addresses" class="address-selector js-address-selector">
              {include  file        = 'checkout/_partials/address-selector-block.tpl'
                                                    addresses   = $customer.addresses
                                                    name        = "id_address_invoice"
                                                    selected    = $id_address_invoice
                                                    type        = "invoice"
                                                    interactive = !$show_delivery_address_form and !$show_invoice_address_form
                                                  }
            </div>


            {if isset($invoice_address_error)}
              <p class="alert alert-danger js-address-error" name="alert-invoice"
                id="id-failure-address-{$invoice_address_error.id_address}">{$invoice_address_error.exception}</p>

            {else}
              <p class="alert alert-danger js-address-error" name="alert-invoice" style="display: none">

              {l s="Your address is incomplete, please update it." d="Shop.Notifications.Error"}</p>

            {/if}

            <p class="add-address">
              <a href="{$new_address_invoice_url}"><i
                  class="material-icons">&#xE145;</i>
            {l s='add new address' d='Shop.Theme.Actions'}</a>
            </p>

          {/if}


        {/if}


        {if !$form_has_continue_button}
          <div class="clearfix">
            <button type="submit" class="btn btn-primary continue float-xs-right" name="confirm-addresses" value="1">

          {l s='Continue' d='Shop.Theme.Actions'}
            </button>
            <input type="hidden" id="not-valid-addresses" class="js-not-valid-addresses" value="{$not_valid_addresses}">
          </div>
        {/if}
      </form>
    </div>
  {/block}

Thank you for your time and help! I think it's a small adjustment, loading the javascript in the module in the right place, thanks to you and have a nice day.

[WisQQ]

17 minut temu, dydy59 napisał:

    $this->context->controller->registerJavascript(
        'module-googleadressautocomplete',
        'modules/googleadressautocomplete/views/js/googleadressautocomplete.js',
        ['position' => 'bottom', 'priority' => 200]
    );

Your relativePath is the issue.
Try to change it to

    $this->context->controller->registerJavascript(
        'module-googleadressautocomplete',
        '/modules/googleadressautocomplete/views/js/googleadressautocomplete.js',
        ['position' => 'bottom', 'priority' => 200]
    );