Yes/No subscription checkbox on frontend

[DegrizNet]

Description

On the request of a client, I aimed to enhance the subscription selection process by implementing a checkbox with a yes/no option. This modification ensures that visitors can clearly see the required selection. To achieve this, I made changes to the file "Reclaim\Plugin\CheckoutLayoutPlugin.php".

Now, I would appreciate some guidance on what steps should be taken next to ensure that the selection is successfully sent to Klaviyo. Any assistance provided would be greatly appreciated.

public function afterProcess(\Magento\Checkout\Block\Checkout\LayoutProcessor $processor, $jsLayout)
{
    if ($this->_klaviyoScopeSetting->getConsentAtCheckoutSMSIsActive()) {
        $smsConsentCheckbox = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/checkbox-set',
                'formElement' => 'radioset',
                "options" => [['value' => 'yes', 'label' => __('Yes'),'placeholder' => 'yes'], ['value' => 'no', 'label' => __('No')]],
                'id' => 'kl_sms_consent',
                'additionalClasses' => 'fc-col-12 kl_sms_consent',
                'tooltip' => [
                    'description' => $this->_klaviyoScopeSetting->getConsentAtCheckoutSMSConsentText(),
                    'tooltipTpl' => 'ui/form/element/helper/tooltip'
                ],
            ],
            'dataScope' => 'shippingAddress.custom_attributes.kl_sms_consent',
            'label' => $this->_klaviyoScopeSetting->getConsentAtCheckoutSMSConsentLabelText(),
            'provider' => 'checkoutProvider',
            'visible' => true,
            'checked' => false,
            'validation' => ['required-entry' => true],
            'sortOrder' => $this->_klaviyoScopeSetting->getConsentAtCheckoutSMSConsentSortOrder(),
            'id' => 'kl_sms_consent',
        ];

        $address = $this->_getDefaultAddressIfSetForCustomer();

        if (!$address) {
            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['kl_sms_consent'] = $smsConsentCheckbox;
        } else {
            // extra un-editable field with saved phone number to display to logged in users with default address set
            $smsConsentTelephone = [
                'component' => 'Magento_Ui/js/form/element/abstract',
                'config' =>
                    [
                        'customScope' => 'shippingAddress',
                        'template' => 'ui/form/field',
                        'elementTmpl' => 'ui/form/element/input',
                    ],
                'label' => 'Phone Number',
                'provider' => 'checkoutProvider',
                'sortOrder' => '120',
                'disabled' => true,
                'visible' => true,
                'value' => $address->getTelephone()
            ];

            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['before-form']['children']['kl_sms_phone_number'] = $smsConsentTelephone;
            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['before-form']['children']['kl_sms_consent'] = $smsConsentCheckbox;
        }
    }

    if (!$this->_customerSession->isLoggedIn() && $this->_klaviyoScopeSetting->getConsentAtCheckoutEmailIsActive()) {
        $emailConsentCheckbox = [
            'component' => 'Magento_Ui/js/form/element/abstract',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/checkbox-set',
                'formElement' => 'radioset',
                "options" => [['value' => 'yes', 'label' => __('Yes'),'placeholder' => 'yes'], ['value' => 'no', 'label' => __('No')]],
                'id' => 'kl_email_consent',
                'additionalClasses' => 'fc-col-12 kl_email_consent',
            ],
            'dataScope' => 'shippingAddress.custom_attributes.kl_email_consent',
            'label' => $this->_klaviyoScopeSetting->getConsentAtCheckoutEmailText(),
            'provider' => 'checkoutProvider',
            'visible' => true,
            'checked' => false,
            'validation' => ['required-entry' => true],
            'sortOrder' => $this->_klaviyoScopeSetting->getConsentAtCheckoutEmailSortOrder(),
            'id' => 'kl_email_consent',
        ];

        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']['shippingAddress']['children']['shipping-address-fieldset']['children']['kl_email_consent'] = $emailConsentCheckbox;
    }

    return $jsLayout;
}

I use Firecheckout and this is the modified display:

[siddwarkhedkar]

Hi @DegrizNet, thank you for taking the time to create an issue on our M2 repository.

I see you were able to create the Yes/No checkboxes. Are these correctly updating the kl_email_consent and kl_sms_consent fields on the sales_order table? If not, I would recommend reaching out to our Support team and they will be able to help you debug this further

[DegrizNet]

Hi @DegrizNet, thank you for taking the time to create an issue on our M2 repository.

I see you were able to create the Yes/No checkboxes. Are these correctly updating the kl_email_consent and kl_sms_consent fields on the sales_order table? If not, I would recommend reaching out to our Support team and they will be able to help you debug this further

Thank you for replay. I have checked database and I have values there but I don't know if they are correct? Problem is if I look into Klaviyo unser profiles I see users are not subscribed.

[DegrizNet]

Just want to update this thread if anyone can help me. I tried contacting email (extensions@klaviyo.com) on readme page but it is not active any more. And I only have test account on Klaviyo (for testing before conecting to client account). Will probably need to change that to have enabled support?

I see that some data is transfered to Klaviyo but it looks like subscription is not active even if it is in sales_order table. Can anyone point me in direction to where to look to fix this problem?

[cykolln]

Hi @DegrizNet, the subscribe request to Klaviyo happens in Observer/SaveOrderMarketingConsent.php. If your code is working correctly after you save the shipment information you should see kl_email_consent and kl_sms_consent saved on the quote in the sales_order table. Your values look good to me based on the screenshot you shared. The observer fires after the order has been saved, which will pull the consent values from the quote and send the request(s) to Klaviyo.

There are a few reasons you might not have consent saved:

• check to see make sure your lists are correctly set in the extension configuration settings
• check to make sure you have a webhook secret set in the extension configuration settings
• check your list's opt-in settings. A double opt-in list won't register subscriptions until the user has confirmed the subscription. For testing you can set your lists to single opt-in.
• check logs

[cykolln]

@DegrizNet Were you able to resolve using the information above?

[DegrizNet]

@DegrizNet Were you able to resolve using the information above?

We just switched to live version on monday and I see people are subscribed to email but not to SMS. I have changed SMS list to single opt-in but i get "Never subscribed" - "Provided phone number without opting in to SMS messaging".

I have now enabled logging to see if there is any error there.

I almost forgot.. Thank you very mush for your help and directions!!

[VictorSoaresRedstage]

Hello @DegrizNet ,

I'm facing same issue as you - I'm seeing subscribed to email but not to SMS on Klaviyo. I know this was a few months, but did you fixed it? If yes, how?

Store running on Adobe Commerce Cloud 2.4.5-p6, Klaviyo extension version 4.1.2.

Thanks.