- Author By Miva |
- Posted on
Today’s blog post comes from Miva Merchant Associate Web Developer, Zeph Dumlao
We’re going to show you how you can work on code in a live store while hiding your work from the public at large. To do this, you’re first going to need to create a customer account in the store. The idea is to get the code you’re working on to only show in run-time (the part of your store that the customers see) when you are viewing the page while logged in as YOUR customer account.
To get started, you will need to create a customer account.
Creating A Customer Account
- Log into the Admin of your store
- In the Navigational Tree on the left, click Add on the Customers branch
- Create a new Customer Account. In this example, my account will be called Developer. Click the Update button when done.
Once you create a Customer Account, the next step is to find out what the account’s Customer ID Number is. To do this, we need to drop a snippet of code in the Global Header.
- Click your store’s name on the left. This will take you to the Edit Store screen. Then click on the Global Header & Footer tab.
The snippet of code we are going to insert looks like this:
<div style="display:none;">[email protected]! &mvt:global:basket:cust_id;<div>
We’re going to place it in the Global Header at the very top, like so:
This code snippet allows you to see your customer number.
- Click the
Now, let’s go to the run-time portion (the part the customer’s see) of the store. Click on the View Store button on the upper right part of the Admin screen.
Go to the Customer Login page and sign in as the Customer Account you created.
Now, sign into your Customer account using the login that you created.
Viewing The Source Code Of Your Store Page
Once you are signed in, we need to view the source code of your store page. Right-click the store page and select View Source in the context menu.
View the source code of your store page
Skim over the source code, or do a search for the marker code. In this example, I do a search for [email protected]! and find what I’m looking for.
The source code should contain your customer ID number.
Building A Conditional Code Snippet
Now, we’re going to build a conditional snippet of code based off of the customer ID that we acquired . The code to use will look something like this:
<mvt:if expr="g.Basket:CUST_ID EQ 2"> CODE_WORK_ONLY_YOU_WILL_SEE_WHILE_LOGGED_IN <mvt:else> CODE_THAT_THE_GENERAL_PUBLIC_WILL_SEE <mvt:if>
For the record, here is how this example code breaks down :
This is how the above code breaks down.
**Note: You do not need to have an “alternative action” if you do not want to. Omitting this portion then, translates to something like:
If “A” is true, do “Y”, otherwise just forget I said anything. ***
The End Results
Back in the Admin of the store, go into the Global Header & Footer section and remove the code we put in there to find out what our customer ID number was. Then paste the example “If statement” from the previous step. Click Update.
Go back to the front end of the store and refresh the screen. When you’re logged in as the customer account you created, you should see “CODE_WORK_ONLY_YOU_WILL_SEE_WHILE_LOGGED_IN”. When viewing the store while NOT logged in, you should see “CODE_THAT_THE_GENERAL_PUBLIC_WILL_SEE”.
You can use this coding idea to hide work on little coding changes, or even hide work on entire template revamps.
For instance, if you wanted to redo the layout of your Category Display page, you might go into Pages /edit CTGY /Category Product List Layout and drop this code. You can replace “CODE_THAT_THE_GENERAL_PUBLIC_WILL_SEE” with the live version of Product List Layout code (for live viewing), and replace “CODE_WORK_ONLY_YOU_WILL_SEE_WHILE_LOGGED_IN” with a work-in-progress version of the Product List Layout code.
And there you go… You just added code work to your store where you (and only you) can see it to develop, thereby not affecting the public’s shopping experience whatsoever.