Managing landing pages in cross-border stores

Store Framework Setting up cross-border stores Managing landing pages in cross-border stores

To meet your store's specific needs, you may want to create custom landing pages. In a cross-border context, you may also want them to be distinct depending on the locations in which your shop operates.

In this case, after creating a custom page, you must link its path to the desired binding as presented in the Linking a landing page to a binding section.

Finally, you may want to remove your landing page from the default binding. For that, check the Unlinking a landing page from a specific binding. section.

Before you begin

Before proceeding any further with this step-by-step:

Create your custom landing pages as presented in this guide.
Check your account's binding ids and keep the returned data with you.

It's also worth noting that this technique only works if the custom pages were created via the CMS rather than the Store Theme.

Instructions

Linking a landing page to a binding

After creating a new page, the page's route becomes available only in the store associated with your account's default binding. The following shows how to associate your page with the desired binding.

Open the terminal and install the vtex.admin-graphql-ide@3.x app:


_10vtex install vtex.admin-graphql-ide@3.x

Open the Admin and go to the GraphQL IDE section.
From the GraphQL IDE dropdown list, choose the vtex.rewriter app.
Run the following query to get the internal data related to your custom page's path.

Replace the values between the curly brackets according to your scenario.

_18{ _18 internal { _18 get(path: "/{URL}") { _18 from _18 declarer _18 type _18 id _18 query _18 binding _18 endDate _18 imagePath _18 imageTitle _18 resolveAs _18 origin _18 disableSitemapEntry _18 } _18 } _18}

Copy and save the returned data.
Erase the previous query and fill in the main text box with the following mutation command.


_10mutation saveInternal($args: InternalInput!) {
_10  internal {
_10    save(route: $args) {
_10      id
_10    }
_10  }
_10}

Click on Query Variables at the bottom of the page and fill in the Query Variables section as in the following:


_16{
_16    "args": {
_16        "from": "/US/about-us",
_16        "declarer": "vtex.store@2.x",
_16        "type": "userRoute",
_16        "id": "vtex.store@2.x:store.custom::{URL}",
_16        "query": null,
_16        "binding": "7cf37a3b-efc0-4e47-8201-d8b58kd4d3fd",
_16        "endDate": null,
_16        "imagePath": null,
_16        "imageTitle": null,
_16        "resolveAs": null,
_16        "origin": "vtex.pages-graphql@2.99.1",
_16        "disableSitemapEntry": null
_16    }
_16}

Replace the args values with the information obtained in Step 4.
Update the binding value with the binding id of the store you want to have your new custom landing page live.

Done! Now, your landing page will be accessible in the default binding as well as in the desired binding.

If you want to link the same landing page to other stores, just repeat this process considering their respective binding ids.

If you don't want to have this landing page in the default binding, check the following section on Unlinking a landing page from a binding.

Unlinking a landing page from a binding

Open the Admin and go to the GraphQL IDE section.
From the GraphQL IDE dropdown list, choose the vtex.rewriter app.
Fill in the main text box with the following mutation.

Replace the values between the curly brackets according to your scenario.

_10mutation deleteInternal($args:RouteLocator){ _10 internal{ _10 delete(path:"/{URL}",locator:$args){ _10 from _10 } _10 } _10}

Click on Query Variables at the bottom of the page and fill in the Query Variables section as in the following.

Replace the values between the curly brackets according to your scenario.

_10{ _10 "args": { _10 "from": "/{URL}", _10 "binding": "{bindingId}" _10 } _10}

Once you run this mutation, you'll remove the page related to the specified {URL} from the {bindingId} provided.